var itemData = {};
(function(){
    var setFunc = parent.setEditorPT;
    var getFunc = parent.getEditorPT;
    function maskShow() {
        var obj = $(this);
        obj.find('.mask').removeClass('hide');
        obj.addClass('minH60');
    }
    function maskHide() {
        var obj = $(this);
        maskHideH(obj);
    }
    function maskHideH(obj) {
        if($('#box_editor').attr('eid') != obj.attr('id') && obj.attr('dnull') != '1') {
            obj.find('.mask').addClass('hide');
            obj.removeClass('minH60');
        }
    }
    function itemUpdate(e) {
        stopDefault(e);
        var id = $(this).attr('did');
        showEditor(id);
    }
    function itemDelete(e) {
        stopDefault(e);
        var id = $(this).attr('did');
        if(id in itemData) {
            delete itemData[id];
        }
        $('#' + id).remove();
        $('#box_editor').addClass('hide');
    }
    function addImg() {
        var box = getItemBox('img');
        $('#main_box').append(box);
        showEditor(box.attr('id'));
        itemDrop();
        return box;
    }
    function addText() {
        var box = getItemBox('text');
        $('#main_box').append(box);
        showEditor(box.attr('id'));
        itemDrop();
        return box;
    }
    function addTitle() {
        var box = getItemBox('title');
        $('#main_box').append(box);
        showEditor(box.attr('id'));
        itemDrop();
        return box;
    }
    function showEditor(id) {
        var editor = $('#box_editor');
        var itemObj = $('#' + id);
        var type = itemObj.attr('itemType');
        var formImg = $('#form_img');
        var formText = $('#form_text');
        var formTitle = $('#form_title');
        var showForm = null;
        var forms = [formImg, formText, formTitle];
        switch(type) {
            case 'img':
                showForm = formImg;
                break;
            case 'text':
                showForm = formText;
                // 获取现有文本
                var p = $(itemObj.find('p').get(0));
                $('#text_content').val(p.html());
                break;
            case 'title':
                showForm = formTitle;
                // 获取现有文本
                var h3 = $(itemObj.find('h3').get(0));
                $('#title_content').val(h3.text());
                break;
        }
        for(var i=0; i<forms.length; i++) {
            if(forms[i] == showForm) {
                forms[i].removeClass('hide');
            } else {
                forms[i].addClass('hide');
            }
        }
        editor.removeClass('hide');
        editor.attr('eid', id);
        // 设置编辑框的位置
        editor.css('top', itemObj.offset().top);
    }
    function editorSaveText() {
        var editor = $('#box_editor');
        var id = editor.attr('eid');
        var content = $('#text_content').val();
        $('#' + id + ' p').html(content);
        editor.addClass('hide');
        editor.attr('eid', '0');
        $('#' + id).attr('dnull', !!content ? '0' : 1);
        maskHideH($('#' + id));
        itemData[id] = {type: 'text', value: content};
    }
    function editorSaveTitle() {
        var editor = $('#box_editor');
        var id = editor.attr('eid');
        var content = $('#title_content').val();
        $('#' + id + ' h3').text(content);
        editor.addClass('hide');
        editor.attr('eid', '0');
        $('#' + id).attr('dnull', !!content ? '0' : 1);
        maskHideH($('#' + id));
        itemData[id] = {type: 'title', value: content};
    }
    function checkImgForm() {
        var val = $('#file_img').val();
        if(!!!val) {
            layer.alert('图片文件不能为空！');
            return false;
        }
        // 判断格式
        val = val.toLowerCase();
        var ext = val.substr(val.lastIndexOf('.') + 1, 3);
        if(ext != 'jpg' && ext != 'png') {
            layer.alert('只支持jpg、png格式的图片！');
            return false;
        }
        layer.load();
        return true;
    }
    function setFormResultImg(data) {
        //console.log(data);
        if(data.status == 10000) {
            var url = domainPicUrl + data.result;
            var editor = $('#box_editor');
            var id = editor.attr('eid');
            var obj = $('#' + id + ' .img');
            obj.attr('src', url);
            editor.addClass('hide');
            editor.attr('eid', '0');
            $('#' + id).attr('dnull', '0');
            maskHideH($('#' + id));
            itemData[id] = {type: 'img', value: data.result};
        } else {
            layer.alert(data.errmsg);
        }
        layer.closeAll();
    }
    function saveSend() {
        var data = [];
        $('#main_box .item').each(function(){
            var obj = $(this);
            var id = obj.attr('id');
            if(itemData[id] != undefined) {
                data.push(itemData[id]);
            }
        });
        setFunc && setFunc(data);
    }
    function stopDefault(e) {
        //阻止默认浏览器动作(W3C)
        if (e && e.preventDefault)
            e.preventDefault();
        //IE中阻止函数器默认动作的方式
        else
            window.event.returnValue = false;
        return false;
    }
    function getItemId() {
        return 'item_' + $.now();
    }
    function getItemBox(type) {
        var box = $('<div class="item minH60"></div>');
        box.on('mouseover', maskShow).on('mouseout', maskHide);
        box.attr('itemType', type);
        switch (type) {
            case 'img':
                box.append('<img class="img" src="/img/default-750x300.jpg">');
                break;
            case 'text':
                box.append('<p class="text"></p>');
                break;
            case 'title':
                box.append('<h3 class="title"></h3>');
                break;
        }
        var id = getItemId();
        box.attr('id', id);
        box.attr('dnull', 1);
        box.append(getMask(id));
        return box;
    }
    function getMask(id) {
        var box = $('<div class="mask hide"></div>');
        var boxBut = $('<div class="but_mask"></div>');
        var updateBut = $('<button type="button" class="btn btn-danger btn-sm"></button>');
        updateBut.append('<i class="fa fa-pencil"></i>');
        updateBut.on('click', itemUpdate);
        updateBut.on('mousedown mousemove taphold touchmove touchend touchcancel', stopDefault);
        updateBut.attr('did', id);
        boxBut.append(updateBut);
        var deleteBut = $('<button type="button" class="btn btn-danger btn-sm"></button>');
        deleteBut.append('<i class="fa fa-trash-o"></i>');
        deleteBut.on('click', itemDelete);
        deleteBut.attr('did', id);
        boxBut.append(deleteBut);
        box.append(boxBut);
        return box;
    }
    function itemDrop() {
        $('#main_box').drop({
            handle: '.item',
            drag: '.item',
            containment: $('#main_box'),
            ondragover: function() {
                $(this).addClass('over');
            },
            ondragout: function() {
                $(this).removeClass('over');
            },
            ondragenter: function() {
                $(this).addClass('enter');
            },
            ondragleave: function() {
                $(this).removeClass('enter');
            }
        });
    }
    function initValue() {
        var data = [];
        if(getFunc) {
            data = getFunc();
        }
        for(var i=0; i<data.length; i++) {
            var t = data[i].type;
            var v = data[i].value;
            switch (t) {
                case 'img':
                    var o = addImg();
                    o.find('.img').attr('src', domainPicUrl + v);
                    o.attr('dnull', 0);
                    maskHideH(o);
                    itemData[o.attr('id')] = data[i];
                    break;
                case 'text':
                    var o =addText();
                    o.find('.text').html(v);
                    o.attr('dnull', 0);
                    maskHideH(o);
                    itemData[o.attr('id')] = data[i];
                    break;
                case 'title':
                    var o = addTitle();
                    o.find('.title').text(v);
                    o.attr('dnull', 0);
                    maskHideH(o);
                    itemData[o.attr('id')] = data[i];
                    break;
            }
        }
        $('#box_editor').addClass('hide');
    }
    $(function(){
        $('#but_add_img').on('click', addImg);
        $('#but_add_text').on('click', addText);
        $('#but_add_title').on('click', addTitle);
        $('#editor_save_text').on('click', editorSaveText);
        $('#editor_save_title').on('click', editorSaveTitle);
        $('#form_img').on('submit', checkImgForm);
        $('#but-save').on('click', saveSend);
        window.setFormResultImg = setFormResultImg;
        initValue();
    });
})(jQuery);